<!--宠物专题新增页面-->
<template>
  <div class="petAdd-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="isUpdate ?'更新':'新增'  +'宠物信息'" name="petAdd">
        <div class="adoptForm">
          <el-form
            label-width="130px"
            :model="adoptRuleForm"
            status-icon
            :rules="rules"
            ref="adoptRuleForm"
          >
            <el-form-item label="宠物大类" prop="petType">
              <el-select v-model="adoptRuleForm.bclass" placeholder="请选择">
                <el-option v-for="(item,index) of bClassList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select >
            </el-form-item>
            <el-form-item label="宠物类别" prop="petType">
              <el-input v-model="adoptRuleForm.variety"></el-input>
            </el-form-item>
            <el-form-item label="宠物介绍" prop="introduce">
              <el-input type="textarea" rows="5" v-model="adoptRuleForm.introduce" maxlength="600" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="生活习性" prop="lifeHabit">
              <el-input type="textarea" rows="5" v-model="adoptRuleForm.lifeHabit" maxlength="600" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="饲养方式" prop="feedingModel">
              <el-input type="textarea" rows="5" v-model="adoptRuleForm.feedingModel" maxlength="600" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-if="!isUpdate" @click="submitForm">提交</el-button>
              <el-button type="primary" v-else @click="updateForm">更新</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="领养信息" name="petLock">
        <div>
          <el-table :data="tableData" border stripe style="width: 100%" height="600" align="center" header-align="center">
            <el-table-column prop="bclass" label="宠物大类" header-align="center"> </el-table-column>
            <el-table-column prop="variety" label="宠物类别"> </el-table-column>
            <el-table-column prop="introduce" label="宠物介绍">
            </el-table-column>
            <el-table-column prop="introduce" label="生活习性">
            </el-table-column>
            <el-table-column prop="lifeHabit" label="饲养方式">
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleUpdateCell(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelCell(scope.row)" v-if="userInfo.power === 1">删除</el-button>
                <el-button type="danger" size="small"  v-else>暂无权限</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination
            class="adoptPage"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination> -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
  name:'PET_ADD',
  data(){
    return {
      activeName:'petAdd',
      adoptRuleForm:{
        bclass:'狗',//宠物大类
        variety:'',//宠物类别
        introduce:'',//介绍
        lifeHabit:'',//生活习惯
        feedingModel:'',//饲养方式
      },
      tableData:[],
      bClassList:[
        {label:'狗',value:'狗'},
        {label:'猫',value:'猫'},
        {label:'小动物',value:'小动物'},
      ],
      isUpdate:false,//是否是更新状态
      rules:{},
    }
  },
  methods:{
    handleClick(){
      if(this.activeName !== 'petAdd'){
        this.getTableData();
      }
    },
    submitForm(){
      let params = {
        ...this.adoptRuleForm,
        author:this.userInfo.username
      };
      this.$axios.post('/insertPet',params).then(({data})=>{
        this.$message.success(data.errorMessage);
        this.resetForm();
      }).catch(()=>{})
    },
    updateForm(){
      let params = {
        ...this.adoptRuleForm,
        author:this.userInfo.username
      };
      this.$axios.post('/updatePet',params).then(({data})=>{
        this.$message.success(data.errorMessage);
        this.resetForm();
      }).catch(()=>{
        this.$message.error(data.errorMessage);
      })
    },
    handleDelCell(){},
    resetForm(){
      Object.keys(this.adoptRuleForm).forEach(item=>{
        if( item !== 'bclass'){
          this.$set(this.adoptRuleForm,item,'')
        }
      })
    },
    //更新表格信息
    handleUpdateCell(row){
      this.activeName = 'petAdd';
      this.isUpdate = true;
      Object.assign(this.adoptRuleForm,row);
    },
    getTableData(){
      this.$axios.post('/queryPetAll').then(({data})=>{
        if(data.data===null){
          return
        };
        let result = data.data.map(m=>m.children).flat();
        this.tableData = result;
      })
    },
  },
  mounted(){
   this.getTableData()
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(['userInfo'])
  },
}
</script>

<style scoped>
  .petAdd-content{
    padding: 20px;
  }
  .petAdd-content .adoptForm{
    width: 800px;
  }
</style>